<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借阅情况</title>
    <script type="text/javascript" src="lib/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
</head>
<body>
<div class="container">
    <table class="layui-table" id="bookfxt" lay-filter="bookfxt">
<span style="color: #ff0000;"></span>
    </table>
</div>
</body>
</html>
<script type="application/javascript">
    layui.use(["table"], function () {
        var table = layui.table
        userid = 1;
        table.render({
            elem: '#bookfxt',
            url: '/libms/ub/list',
            method: "post",
            where: {
                userid: userid
            },
            cols: [[
                {field: 'bookName', title: "书籍名称"},
                {
                    field: 'type', title: "借阅时间", templet: function (d) {
                        var ctime = new Date(d.bTime);
                        return ctime.getFullYear() + "年" + (ctime.getMonth() + 1) + "月" + ctime.getDate() + "日 ";


                    }
                },
                {
                    field: 'type', title: "预计归还时间", templet: function (d) {
                        var ctime = new Date(d.rTime)
                        return ctime.getFullYear() + "年" + (ctime.getMonth() + 1) + "月" + ctime.getDate() + "日 ";


                    }
                },
                {
                    field: 'type', title: "实际归还时间", templet: function (d) {
                        if (d.rtime) {
                            var ctime = new Date(d.rrTime)
                            return ctime.getFullYear() + "年" + (ctime.getMonth() + 1) + "月" + ctime.getDate() + "日 ";

                        } else {
                            return "尚未归还"
                        }


                    }
                },
                {
                    field: 'type', title: "距离归还剩余时间", templet: function (d) {
                        var btime = d.rTime;
                        var time = new Date().getTime();
                        var t = Math.ceil((btime - time) / 1000 / 60 / 60 / 24) ;
                        return (t > 0 ? "剩余" +  t + "天"  : "<span style=\"color: #ff0000;\">超出" + (-t) + "天</span>") ;
                    }
                },
                {fixed: 'right', width:200, align:'center', toolbar: '#barDemo',  title: '操作'}
                // {field: 'num', title: '借阅次数'}
            ]],
            done: function (res, curr, count) {
                // tableData = res;
                // zbz = [];
                // zbdata = [];
                // for (var i in res.data) {
                //     zbz.push(res.data[i].type);
                //     zbdata.push(res.data[i].num);
                // }
            }

        });
        //监听工具条
        table.on('tool(bookfxt)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('续借：<br>'+ JSON.stringify(data))
            }
        });
    })
</script>
<script type="text/html" id="barDemo">
    <!-- <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">续借</a>
    <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->

</script>